<template>
  <div class="easyd-weixin-Box">
     <div class="openHelp" @click="openHelpClick"><i class="fa fa-lightbulb-o fa-lg"></i><span>帮助</span></div>
     <div class="guideActionBox" v-if="isGuide">
        <div class="app_guide">
            <div class="app_guide_content app_guide_1_content" v-if="guideData.guide_1">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助小助手：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>1. 您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <img class="app_guide_img app_guide_1_img" v-if="guideData.guide_1" src="static/images/jiantou_you_shang.png" />
            <div class="app_guide_border app_guide_1_border" v-if="guideData.guide_1"></div>
          </div>
    </div>


    <transition name="fade" enter-active-class="animated fadeOutUp" leave-active-class="animated fadeOutUp" :duration="200">
      <div class="concernRemindBox" v-if="isConcern">您还没有关注该朋友，
        <span @click="concernClick">请先关注</span>
      </div>
    </transition>

    <div class="serviceBox">
        <div class="serviceItem"  @click="serviceClick" v-for="item in serviceData">
            <img :src="item.img" v-lazy="item.img">
            <div class="serviceItemInfo">
                <div class="serviceItemName">{{item.text}}</div>
                <div class="serviceItemPrice">¥99.9&nbsp;<span>¥1080</span></div>
                <div class="serviceItemBuyAndBrowse"><i class="fa fa-shopping-cart fa-lg"></i>100&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-eye fa-lg"></i>100
                    <div class="concernService"><i class="fa fa-paper-plane-o fa-lg"></i>关注该服务卡</div>
                </div>
            </div>
            <!-- <div class="concernService"><i class="fa fa-paper-plane-o fa-lg"></i>关注该服务卡</div> -->
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            isGuide   : false,
            guideData : {
                guide_1 : true
            },
            isConcern : true,
            serviceData : [
                {
                    "text" : "体检卡 白领豪华体检套餐 全国门店通用",
                    "img"  : "./static/images/fuwuka1.png"
                },
                {
                    "text" : "体检卡 感恩深度体检套餐 全国门店通用",
                    "img"  : "./static/images/fuwuka2.png"
                },
                {
                    "text" : "体检卡 白领豪华体检套餐 全国门店通用",
                    "img"  : "./static/images/fuwuka3.png"
                }
            ]
        }
    },
    mounted(){

    },
    methods : {
        openHelpClick(){
            this.isGuide = true;
        },
        concernClick(){

        },
        serviceClick(){
             this.$router.push({
                path : '/serviceDetail'
            })
        },
        closeGuideClick(){
            this.isGuide = false
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'

.app_guide {

   .app_guide_1_content {
      top 350px
   }

    .app_guide_1_img {
        top 290px
        left 220px  
    }

    .app_guide_1_border {
      width 92%
      box-sizing border-box
      left 4%
      height 220px
      top 65px
    }


  }


    .serviceBox {
        width 100%
        position absolute
        top 50px
        bottom 0px
        box-sizing border-box 
        padding 5px 15px
        overflow auto   
        -webkit-overflow-scrolling : touch;
        
    }

    .serviceItem {
        width 100%
        margin-bottom 25px
        height auto  
        margin-top 10px
        $itemStyle()

        &:last-child {
            margin-bottom 10px    
        }

        .serviceItemInfo {
            height 75px
            background #fff
            font-size 14px
            font-weight 500
            border-bottom-left-radius 5px
            border-bottom-right-radius 5px
            margin-top -5px
            border-top 1px solid #eee
            padding 10px
            color #333

            .serviceItemPrice {
                    float left    
                    font-weight 500
                    letter-spacing 1px
                    color orange
                    font-size 18px
                    margin-top 5px

                    span {
                        font-size 12px
                        text-decoration line-through
                        float right
                        color #999
                        margin-top 6px
                    }
                 
            }

            .serviceItemName {
                width 100%
                height 20px
                float left   
                font-weight 500 
            }

            .serviceItemBuyAndBrowse{
                width 100%
                float left
                font-size 12px
                color #999
                font-weight 500
                height 20px
                margin-top 8px

                i {
                    font-size 14px
                    color #ccc
                    position relative
                    top -2px
                    margin-right 5px
                }  
            }

            .concernService {
                float right   
                color orange    

                i {
                    font-size 12px
                    margin-right 5px
                    position relative
                    top -1px
                    color orange 
                }
            }
        }

        img {
            width 100%
            height 100%
            border-top-left-radius 5px
            border-top-right-radius 5px
            object-fit cover
            
        }
    }
</style>
